<template>
  <el-card class="comment-card">
    <template #header>
      <div class="card-header">
        <div class="user-info">
          <el-avatar :size="32" :src="comment?.user_avatar || defaultAvatar" />
          <span class="username">{{ comment?.user_name || '匿名用户' }}</span>
        </div>
        <div class="comment-time">{{ formatTime(comment.created_at) }}</div>
      </div>
    </template>
    
    <div class="comment-content">{{ comment.content }}</div>
    
    <template #footer>
      <div class="comment-actions">
        <el-button
          v-if="showDelete"
          type="danger"
          size="small"
          @click="handleDelete"
          :loading="deleteLoading"
        >
          删除
        </el-button>
      </div>
    </template>
  </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { charactersCommentAPI } from '@/api/charactersComments';

const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';

const props = defineProps({
  comment: {
    type: Object,
    required: true
  },
  showDelete: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update-comment', 'delete-comment']);

const deleteLoading = ref(false);

const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleString();
};

const handleDelete = async () => {
  try {
    deleteLoading.value = true;
    await charactersCommentAPI.deleteComment(props.comment.id);
    emit('delete-comment', props.comment.id);
    ElMessage.success('删除成功');
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '删除失败');
  } finally {
    deleteLoading.value = false;
  }
};
</script>

<style scoped>
/* 保持原有样式不变 */
.comment-card {
  margin-bottom: 16px;
  transition: box-shadow 0.3s;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  font-weight: 500;
}

.comment-time {
  color: #999;
  font-size: 0.9em;
}

.comment-content {
  line-height: 1.6;
  margin: 12px 0;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>